import React from 'react';
import { connect } from 'dva';
import moment from 'moment'
import { Tree, Button, Table, Form, Input, Popconfirm } from 'antd';
import AssetModelModal from '../../components/basic/AssetModelModal';
const TreeNode = Tree.TreeNode;
const FormItem = Form.Item;

function AssetModel({ dispatch, assetModel, loading, form }) {

  const { getFieldDecorator, getFieldsValue,getFieldValue, } = form;
  const { currentItem ,newKey,assetTypeTree,assetBrandList,brandId, modalVisible, modalType,imegeUrl} = assetModel
  const columns = [{
    title: '型号名称',
    dataIndex: 'name',
    key: 'name',
    width: 150,
  }, {
    title: '资产分类',
    dataIndex: 'typeName',
    key: 'typeName',
    width: 100,
  }, {
    title: '模型路径',
    dataIndex: 'unityModelPath',
    key: 'unityModelPath',
    width: 150,
  }, {
    title: 'U高',
    dataIndex: 'uHeight',
    key: 'uHeight',
    width: 50,
  }, {
    title: '是否柜内设备',
    dataIndex: 'isInCabinet',
    key: 'isInCabinet',
    width: 100,
    render: (value, row, index) => {
        return (
          value? '是' : '否'
        )
      }
  }, { title: '创建时间', dataIndex: 'createTime', key: 'createTime', width: 150,
     render: (value, row, index) => {
        return (
           value?new moment(value).format("YYYY-MM-DD HH:mm"):''
        )
      }
   },{
    title: '操作',
    key: 'operation',
    width: 100,
    render: (text, record) => (
        <span>           
            <a  onClick={onEditItem.bind(null, record.id_)}>编辑</a>
            <span className="ant-divider" />
            <Popconfirm title="确认删除？" onConfirm={deleteHandler.bind(null, record.id_)}>
            <a>删除</a>
            </Popconfirm>
        </span>
    ),
  }];

  const pagination = {
    current:assetModel.current,
    pageSize:assetModel.currentSize,
    total: assetModel.total,
    showSizeChanger: true,
    showTotal: (total => '共' + assetModel.total + '条'),
    onShowSizeChange(current, size) {
      dispatch({
        type: 'assetModel/queryAssetModel',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':size} },
      });
    },
    onChange(current) {
      dispatch({
        type: 'assetModel/queryAssetModel',
        payload: { ...getFieldsValue(),...{'pageNum':current, 'pageSize':assetModel.currentSize} },
      });
    },
  };

  const onSelect = (info) => {
    if(info.length > 0){
     dispatch({
        type: 'assetModel/queryAssetModel',
        payload: { ...getFieldsValue(),...{'brandId':info[0]} },
      });
    }else{
      dispatch({
        type: 'assetModel/queryAssetModel',
        payload: { ...getFieldsValue(),...{'brandId':null} },
      });
    }
  }

  const loop = data => data.map((item) => {
    return <TreeNode key={item.id_} title={item.name} />;
  });

  const submitHandle = () => {
    dispatch({
        type: 'assetModel/queryAssetModel',
        payload: { ...getFieldsValue() },
    });
  }

  const onEditItem = (id) => {
    dispatch({
        type: 'assetModel/qryById',
        payload: id
    })
  }
  const addHandler = () => {
    dispatch({
    type: 'assetModel/showModal',
    payload: {
        modalType: 'create',
       },
    })
}

  function deleteHandler(id) {
    dispatch({
      type: 'assetModel/remove',
      payload: id,
      search:{brandId:assetModel.brandId,...getFieldsValue(),...{'pageNum':assetModel.current, 'pageSize':assetModel.currentSize}},
    });
  }
  
  const modalProps = {
    item: modalType === 'create' ? {} : currentItem,
    dispatch:dispatch,
    imegeUrl:imegeUrl,
    brandId:brandId,
    visible: modalVisible,
    assetBrand:assetBrandList,
    assetType:assetTypeTree,
    type: modalType,
    maskClosable: false,
    confirmLoading: loading,
    title: `${modalType === 'create' ? '新增型号' : '编辑型号'}`,
    wrapClassName: 'vertical-center-modal',
    newKey : newKey,
    onOk (data) {
        dispatch({
            type: `assetModel/${modalType}`,
            payload: data,
            search:{brandId:assetModel.brandId,...getFieldsValue(),...{'pageNum':assetModel.current, 'pageSize':assetModel.currentSize}},
        })
    },
    onCancel () {
        dispatch({
            type: 'assetModel/hideModal',
        })
    },
  }

  return (
    <div style={{backgroundColor:'#fff'}}>
      <div style={{width:'250px',float: "left"}}>
        <div style={{width:'100%',height:'40px',backgroundColor:'#232f40',lineHeight:'40px',color:'#fff',paddingLeft:'20px',fontSize:'14px',fontWeight:'400'}}>
          品牌树
        </div>
        <div style={{width:'100%',}}>
            <Tree
                onSelect={onSelect}
            >
                { assetModel.assetBrandList && loop(assetModel.assetBrandList) }
            </Tree>

        </div>
      </div>
      <div style={{minHeight:'100%',marginLeft:'250px'}}>
        <div style={{width:'100%',backgroundColor:'#fff',lineHeight:'40px',paddingLeft:'20px',paddingTop:'10px'}}>
          <Form layout="inline" >
            <FormItem>
              {getFieldDecorator('brandId',{initialValue:assetModel.brandId})(
                <Input type="hidden" />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('pid',{initialValue:assetModel.pid})(
                <Input type="hidden" />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('name',{initialValue:''})(
                <Input type="text" placeholder="型号名称" style={{ width:'200px', marginRight: '3%' }} />
              )}
            </FormItem>
            <FormItem>
              <Button type="primary" size='large' onClick={submitHandle} className='ant-search-btn'>查询</Button>
            </FormItem>
            <div style={{marginTop:'-40px',textAlign:'right',paddingRight:'10px'}}>
              <FormItem>                
                  <Button type="primary" size='large' onClick={addHandler}>新增型号</Button>
              </FormItem>
            </div>
         </Form>
        </div>
        <div style={{width:'100%',padding:'30px 20px',}}>
          <Table columns={columns} rowKey={record => record.id_} loading={loading} dataSource={assetModel.assetModelList} pagination={pagination}
          />
        </div>
      </div>
      <div style={{width:'100%',clear:'both'}}></div>
      <AssetModelModal {...modalProps} />
    </div>
  );
}

function mapStateToProps(state) {
  return { assetModel : state.assetModel,loading:state.loading.models.assetModel};
}

AssetModel = Form.create()(AssetModel);

export default connect(mapStateToProps)(AssetModel);
